import React, {Component,Fragment} from 'react';
import TodoItem from './todoItem';
import axios from 'axios';
import './todoList.css'
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }
        this.deleteListValue = this.deleteListValue.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.setResult = this.setResult.bind(this);
    }
    componentDidMount(){
        axios.get('/api/todoList')
            .then((res)=>{ console.log(res)})
            .catch((error)=>{console.log(error)})
    }
    render() {
        return ( 
            <Fragment>
                <label htmlFor="insertArea">输入内容：</label>
                <input 
                    id="insertArea" 
                    className = "border-color"
                    value = {this.state.inputValue}
                    onChange = {this.handleInputChange}/> 
                <button onClick = {this.setResult} > 提交 </button> 
                <TodoItem content={this.state.list} deleteListValue={this.deleteListValue}/>
            </Fragment>
        )
    }
    handleInputChange(e) {
        let value = e.target.value
        this.setState(()=>({
            inputValue:value
        }));
    }
    setResult() {
        this.setState((prevState)=>({
            list: [...prevState.list, prevState.inputValue],
            inputValue: ''
        }));
    }
    deleteListValue(index) {
        //immutable
        //state不允许有任何改变
        this.setState((prevState)=>{
            let list = [...prevState.list]
            list.splice(index, 1)
            return {list}
        })
    }
   
}
export default TodoList;